<template>
  <div>
    <ul>
      <li
          v-for="(item, index) in list"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="setCurrentIndex(index)"
      >
        {{ item }}
      </li>
    </ul>
    <button @click="goToPrev">上一个</button>
    <button @click="goToNext">下一个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      currentIndex: 0,
    };
  },
  methods: {
    setCurrentIndex(index) {
      this.currentIndex = index;
    },
    goToPrev() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      } else {
        // 如果需要，可以在这里处理到达列表开始的情况
        // 例如，可以将 currentIndex 设置为列表的末尾
        this.currentIndex = this.list.length - 1;
      }
    },
    goToNext() {
      if (this.currentIndex < this.list.length - 1) {
        this.currentIndex++;
      } else {
        // 如果需要，可以在这里处理到达列表末尾的情况
        // 例如，可以将 currentIndex 设置为列表的开始
        this.currentIndex = 0;
      }
    },
  },
};
</script>

<style scoped>
.active {
  background-color: lightblue;
}
</style>
